<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>护肤</title>
		<!--公用css-->
		<link rel="stylesheet" type="text/css" href="../common/css/meta.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/rest.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/mui.min.css" />
		<!--mui内置额外的图标-->
		<link rel="stylesheet" type="text/css" href="../common/css/icons-extra.css" />
		<!--导航栏公用css-->
		<link rel="stylesheet" type="text/css" href="../common/css/nav_bar.css" />
		<!--本界面css-->
		<link rel="stylesheet" type="text/css" href="css/class_hf.css" />
	</head>

	<body>

		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

			<div class="mui-scroll">
				<!--数据列表-->
			<div class="body">
				<div class="body_header">
					<table class="table">
						<tr ><td class="td td1"><a href="huazhuangshui.html">化妆水</a></td><td class="td td1">精华</td><td class="td">洁面/卸妆</td></tr>
						<tr ><td class="td td1">面膜</td><td class="td td1">面霜/乳液</td><td class="td">眼霜</td></tr>
						<tr ><td class="td td1">祛痘</td><td class="td td1">去黑头</td><td class="td">美白</td></tr>
					</table>
				</div>
				<div class="body_mid">
					<ul>
						<li><a href="#" style="color: red;">默认</a></li>
						<li><a href="">热度</a></li>
						<li><a href="">新品</a></li>
						<li><a href="">价格</a></li>
					</ul>	
				</div>
					<div class="body">
						
						
						<div class="body_bottom" >

						<ul class="class_hf" id="inner">
						</ul>
							
						</div>
							
					</div>


			</div>
		</div>
	</div>
			
	</body>
	<!--公用js-->
	<script src="../common/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../common/js/mui.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="js/shop.js" type="text/javascript" charset="utf-8"></script>-->
	<!--链接js-->
	<script src="js/link.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
	</script>
	<script>
		mui.ajax('json/hufu.json', {
			dataType: 'json', //服务器返回json格式数据
			type: 'get', //HTTP请求类型
			success: function(data) {
				//服务器返回响应，根据响应结果，分析是否登录成功
				for(var i = 0; i < 2; i++) {
					var li = document.createElement('li');
					li.className = 'li';
					li.innerHTML = '<li><a onclick=" '+data[i].onclick+' "><img class="img" src="'+data[i].url+'"></a><p id="p1">'+data[i].inner1+'</p><p id="p2">'+data[i].inner2+'</p><p id="p4">￥ '+data[i].inner4+'</p><p id="p3">已售 '+data[i].inner3+'</p></li>';
					document.getElementById("inner").appendChild(li);
				}
			},
			error: function(xhr, type, errorThrown) {
				//异常处理；
				console.log(type);
			}
		});
	</script>
			<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					mui.ajax('json/hotPic.json', {
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						success: function(data) {
							//获得服务器响应
						var inn = document.body.querySelector('#inner');
						var li = document.body.querySelectorAll('.li');
						for(var i = li.length, len = i + 2; i < len; i++) {
						var li = document.createElement('li');

						li.innerHTML = '<li><a onclick=" '+data[i].onclick+' "><img class="img" src="'+data[i].url+'"></a><p id="p1">'+data[i].inner1+'</p><p id="p2">'+data[i].inner2+'</p><p id="p4">￥ '+data[i].inner4+'</p><p id="p3">已售 '+data[i].inner3+'</p></li>';
							if(i % 2 == 0) {
									left.insertBefore(li, inn.firstChild);
								} else {
									
								}

							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(type);
						}
					});
				}, 1500);
			}
			var count = 0;
			
			/**
			 * 上拉加载具体业务实现
			 */
			/*function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					mui.ajax('json/hotPic.json', {
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						success: function(data) {
							//服务器返回响应，根据响应结果，分析是否登录成功；
							var li = document.createElement('li');

							li.innerHTML = '<li><a onclick=" '+data[i].onclick+' "><img class="img" src="'+data[i].url+'"></a><p id="p1">'+data[i].inner1+'</p><p id="p2">'+data[i].inner2+'</p><p id="p4">￥ '+data[i].inner4+'</p><p id="p3">已售 '+data[i].inner3+'</p></li>';
							document.getElementById("inner").appendChild(li);
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
						}
					});

				}, 1500);
			}*/
		/*	if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);

				});
			} else {
				mui.ready(function() {

				});
			}*/
		</script>
</html>